<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点——修改——替换节点</title>
    <style type="text/css">

    </style>
</head>

</head>
<body>
    <div id="container" >
        <ul id="list">
            <li>大一</li>
            <li id="er">大二</li>
            <li id="three">大三</li>
            <li>大四</li>
            <li>大五</li>
        </ul>
    </div>
    <button type="button" onclick="replaceNode()">点击我，进行替换节点</button>
<script type="text/javascript">

    function replaceNode(){
        // 1、要替换的节点
        let refNode = document.querySelector("#three") ;
        // 2、 替换成什么东西，必须是一个节点
        // 2.1 创建一个div 元素（因为元素也是节点）
        let replaceNode = document.createElement("div") ;
        // 2.2 指定div中的内容，否则，div 是空的， 没有任何效果
        replaceNode.innerHTML = "我是新创建的节点";

        // 3、替换
        // 3.1 找到父元素
        let fatherNode = document.querySelector("#list") ;
        // replaceChild( 老节点 , 新节点 )
        fatherNode.replaceChild( replaceNode , refNode ) ;
    }



</script>


</body>
</html>